<template>
    <div class="dragBox">
        <!-- 方式一 -->
        <!-- <div class="flex dragDisk" id="dragBox" ref="dragDisk" @mousedown="down" @mousemove="move" @mouseup="end" @touchstart="down" @touchmove="move" @touchend="end">
            <div class="flex diskColItem">
                <div class="diskRowItem"></div>
                <div class="diskRowItem iconUp"></div>
                <div class="diskRowItem"></div>
            </div>
            <div class="flex diskColItem">
                <div class="diskRowItem iconLeft"></div>
                <div class="diskRowItem iconCenter">
                    <div class="dragDiskBtn" ref="touchDiv" id="touchDiv"></div>
                </div>
                <div class="diskRowItem iconRight"></div>
            </div>
            <div class="flex diskColItem">
                <div class="diskRowItem"></div>
                <div class="diskRowItem iconDown"></div>
                <div class="diskRowItem"></div>
            </div>
        </div> -->

        <!-- 方式二 -->
        <!-- <div class="flex dragcompent2" id="dragBox"> -->
            <div class="flex controlBox upDownComp2">
                <button type="button" class="dragBgFirst" :class="up?'isUp':''"
                 
                 @touchstart="upMouseDown('up',$event)" 
                 @touchmove="upMouseMove('up',$event)" 
                 @touchend="upMouseEnd('up',$event)"
                 ></button>
                <button type="button" class="dragBgSecond" :class="retreat?'isRetreat':''"
                 
                 @touchstart="upMouseDown('retreat',$event)" 
                 @touchmove="upMouseMove('retreat',$event)" 
                 @touchend="upMouseEnd('retreat',$event)"
                 ></button>
            </div>
            <div class="flex controlBox leftRughtComp2">
                <button type="button" class="dragBgFirst" :class="left?'isLeft':''"
                 
                 @touchstart="upMouseDown('left',$event)" 
                 @touchmove="upMouseMove('left',$event)" 
                 @touchend="upMouseEnd('left',$event)"
                 ></button>
                <button type="button" class="dragBgSecond" :class="right?'isRight':''"
                 
                 @touchstart="upMouseDown('right',$event)" 
                 @touchmove="upMouseMove('right',$event)" 
                 @touchend="upMouseEnd('right',$event)"
                 ></button>
            </div>
        <!-- </div> -->
    </div>
</template>

<script>
import { NAV } from '../js/navigation'
import { dragControl } from '../js/methods'
export default {
    name: 'dragComponent',
    components:{

    },
    data(){
        return{
            flags: false,
            position: { x: 0, y: 0 },
            nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',//nx:ny 按钮中心点，dx:dy 按钮坐标
            dragX:'',
            dragY:'',
            dragW:'',
            dragH:'',
            circleR:0,
            drackR:0,
            maxR:0,
            maxTop:0,
            maxBottom:0,
            maxLeft:0,
            maxRight:0,

            up: false,
            retreat: false,
            left: false,
            right: false,
        }
    },
    methods:{
        // 实现移动端拖拽
        down(event){
            const that = this;
            this.flags = true;
            var touch;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            //拖拽圆,大圆盘的半径
            that.circleR = parseInt(window.getComputedStyle(this.$refs.touchDiv).height) / 2;
            that.drackR = parseInt(window.getComputedStyle(this.$refs.dragDisk).height) / 2;
            console.log(that.drackR)
            //最大超出范围
            that.maxR = that.drackR - that.circleR;

            this.position.x = touch.clientX;
            this.position.y = touch.clientY;
            let dragBox = document.getElementById("dragBox");
            let moveDiv = document.getElementById("touchDiv");
            
            //盒子坐标
            this.dragX = dragBox.offsetLeft;
            this.dragY = dragBox.offsetTop;
            this.dragW = dragBox.clientWidth;
            this.dragH = dragBox.clientHeight;

            //按钮坐标
            this.dx = moveDiv.offsetLeft;
            this.dy = moveDiv.offsetTop;

            //按钮中心点
            this.nx = this.dx + touch.target.clientWidth / 2;
            this.ny = this.dy + touch.target.clientHeight / 2;

            //盒子上下左右坐标点
            that.maxTop = that.ny - that.maxR;
            that.maxBottom = that.ny + that.maxR;
            that.maxLeft = that.nx - that.maxR;
            that.maxRight = that.nx + that.maxR;
        },

        //拖拽移动
        move(event){
            const that = this;
            let moveDiv = document.getElementById("touchDiv");
            if(this.flags){
                var touch ;
                if(event.touches){
                    touch = event.touches[0];
                }else {
                    touch = event;
                }

                //计算点击坐标到圆点坐标的水平和垂直距离
                let cX =  Math.abs(touch.clientX-this.nx);
                let cY =  Math.abs(touch.clientY-this.ny);
                let angle = Math.atan(cY/cX);//角度
                let cx=0;
                let cy=0;

                //计算平方，根号，得出移动坐标到圆点距离
                // let moveX = Math.pow(touch.clientX - this.nx,2);
                // let moveY = Math.pow(touch.clientY - this.ny,2);
                let moveR = Math.sqrt(Math.pow(touch.clientX - this.nx,2) + Math.pow(touch.clientY - this.ny,2))

                const maxR = that.maxR;
                if(moveR > that.maxR){
                    if(touch.clientY <= that.maxTop){
                        dragControl("up")
                    }
                    if(touch.clientY >= that.maxBottom){
                        dragControl("down")
                    }
                    if(touch.clientX <= that.maxLeft){
                        dragControl("left")
                    }
                    if(touch.clientX >= that.maxRight){
                        dragControl("right")
                    }
                    //右上
                    if(touch.clientX>=this.nx && touch.clientY <= this.ny ){
                        cx = Math.cos(angle)*maxR;
                        cy = Math.sin(angle)*-maxR;
                        moveDiv.style.top = that.dy + cy + 'px';
                        moveDiv.style.left = that.dx + cx + 'px';
                    }
                    //左上
                    if(touch.clientX<this.nx && touch.clientY<this.ny ){
                        cx = Math.cos(angle)*-maxR;
                        cy = Math.sin(angle)*-maxR;
                        moveDiv.style.top = this.dy + cy + 'px';
                        moveDiv.style.left = this.dx + cx + 'px';
                    }
                    //左下
                    if(touch.clientX<this.nx && touch.clientY>this.ny ){
                        cx = Math.cos(angle)*-maxR;
                        cy = Math.sin(angle)*maxR;
                        moveDiv.style.top = this.dy + cy + 'px';
                        moveDiv.style.left = this.dx + cx + 'px';
                    }
                    //右下
                    if(touch.clientX>this.nx && touch.clientY>this.ny ){
                        cx = Math.cos(angle)*maxR;
                        cy = Math.sin(angle)*maxR;
                        moveDiv.style.top = this.dy + cy + 'px';
                        moveDiv.style.left = this.dx + cx + 'px';
                    }  
                }else{
                    moveDiv.style.top = touch.clientY - that.circleR + 'px';
                    moveDiv.style.left = touch.clientX - that.circleR + 'px';
                }

                //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
                document.addEventListener("touchmove",function(){
                    event.preventDefault();
                },false);
            }
        },

        //鼠标释放时候的函数
        end(){
            let moveDiv = document.getElementById("touchDiv")
            moveDiv.style.left = this.dx+"px";
            moveDiv.style.top = this.dy +"px";
             this.flags = false;
             //停止
             NAV.manualCtrl({});
        },


        //鼠标按下
        upMouseDown(type, event){
            this.clickCtrl(type);
            event.preventDefault();
            return false;
        },
        upMouseMove(type, event){
            this.clickCtrl(type);
            event.preventDefault();
            return false;
        },
        // 点击指令公共函数
        clickCtrl(event){
            let that = this;
            if(event === 'up'){
                that.up = true;
                if(that.left){
                    NAV.manualCtrl({
                        linear: 0.4,
                        angular: 0.4
                    });
                }else if(that.right){
                    NAV.manualCtrl({
                        linear: 0.4,
                        angular: -0.4
                    });
                }else{
                    NAV.manualCtrl({
                        linear: 0.4,
                    });
                }
            }else if(event === "retreat"){
                that.retreat = true;
                if(that.left){
                    NAV.manualCtrl({
                        linear: -0.4,
                        angular: 0.4
                    });
                }else if(that.right){
                    NAV.manualCtrl({
                        linear: -0.4,
                        angular: -0.4
                    });
                }else{
                    NAV.manualCtrl({
                        linear: -0.4,
                    });
                }
            }else if(event === "left"){
                that.left = true;
                if(that.up){
                    NAV.manualCtrl({
                        linear: 0.4,
                        angular: 0.4
                    });
                }else if(that.retreat){
                    NAV.manualCtrl({
                        linear: -0.4,
                        angular: 0.4
                    });
                }else{
                    NAV.manualCtrl({
                        angular: 0.4
                    });
                }
            }else{
                that.right = true;
                if(that.up){
                    NAV.manualCtrl({
                        linear: 0.4,
                        angular: -0.4
                    });
                }else if(that.retreat){
                    NAV.manualCtrl({
                        linear: -0.4,
                        angular: -0.4
                    });
                }else{
                    NAV.manualCtrl({
                        angular: -0.4
                    });
                }
            }
        },

        upMouseEnd(type){
            let that = this;
           if(type === 'up'){
                that.up = false;
                if(that.left){
                    NAV.manualCtrl({
                        linear: 0.0,
                        angular: 0.4
                    });
                }else if(that.right){
                    NAV.manualCtrl({
                        linear: 0.0,
                        angular: -0.4
                    });
                }else{
                    NAV.manualCtrl({
                        linear: 0.0,
                    });
                }
            }else if(type === "retreat"){
                that.retreat = false;
                if(that.left){
                    NAV.manualCtrl({
                        linear: 0.0,
                        angular: 0.4
                    });
                }else if(that.right){
                    NAV.manualCtrl({
                        linear: 0.0,
                        angular: -0.4
                    });
                }else{
                    NAV.manualCtrl({
                        linear: 0.0,
                    });
                }
            }else if(type === "left"){
                that.left = false;
                if(that.up){
                    NAV.manualCtrl({
                        linear: 0.4,
                        angular: 0.0
                    });
                }else if(that.retreat){
                    NAV.manualCtrl({
                        linear: -0.4,
                        angular: 0.0
                    });
                }else{
                    NAV.manualCtrl({
                        angular: 0.0
                    });
                }
            }else{
                that.right = false;
                if(that.up){
                    NAV.manualCtrl({
                        linear: 0.4,
                        angular: 0.0
                    });
                }else if(that.retreat){
                    NAV.manualCtrl({
                        linear: -0.4,
                        angular: 0.0
                    });
                }else{
                    NAV.manualCtrl({
                        angular: 0.0
                    });
                }
            }
        },
    },
    
    //属性监听
    watch:{
       
    }

}
</script>

<style scoped lang="less">
    .dragBox{
        position: relative;
        display: inline;
    }
    .dragcompent2{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // box-shadow: 0 0 5px #3f86fe; 
        position: fixed;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 440px;
        z-index: 998;
        flex-direction: column;
        overflow: hidden;
        .controlBox{
            width: 200px;
            height: 200px;
            // border: 1px solid #eeeeee;
            border-radius: 50%;
            flex-direction: column;
            
            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -khtml-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .upDownComp2{
            transform:rotate(90deg);
        }
        .dragCenterBox{
            height: 40px;
        }
        .leftRughtComp2{
        }
        .leftRughtComp2{
            transform: rotateY(180deg);
        }
        .dragBgFirst,.dragBgSecond{
            width: 200px;
            height: 100px;
            background-image: url("../../src/assets/icon-dragBtn-nor.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        .dragBgSecond{
            transform: rotateX(180deg);
        }
        .isUp{
            background-image: url("../../src/assets/icon-dragBtn-sel.png");
        }
        .isRetreat{
            background-image: url("../../src/assets/icon-dragBtn-sel.png");
        }
        .isLeft{
             background-image: url("../../src/assets/icon-dragBtn-sel.png");
        }
        .isRight{
            background-image: url("../../src/assets/icon-dragBtn-sel.png");
        }
    }


    .upDownComp2{
        position: fixed;
        z-index: 997;
        width: 50px;
        height: 140px;
        bottom: 50px;
        left: 60px;
    }
    .controlBox{
        justify-content: space-between;
        // border: 1px solid #eeeeee;
        border-radius: 50%;
        flex-direction: column;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
    }

    .leftRughtComp2{
        // transform: rotateY(180deg);
        position: fixed;
        z-index: 997;
        width: 50px;
        height: 140px;
        right: 100px;
        bottom: 50px;
        transform:rotate(270deg);
    }
    .dragBgFirst,.dragBgSecond{
        width: 50px;
        height: 50px;
        background-image: url("../../src/assets/icon-dragBtn-nor.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .dragBgSecond{
        transform: rotateX(180deg);
    }
    .isUp{
        background-image: url("../../src/assets/icon-dragBtn-sel.png");
    }
    .isRetreat{
        background-image: url("../../src/assets/icon-dragBtn-sel.png");
    }
    .isLeft{
            background-image: url("../../src/assets/icon-dragBtn-sel.png");
    }
    .isRight{
        background-image: url("../../src/assets/icon-dragBtn-sel.png");
    }





   .dragDisk{
        box-shadow: 0 0 5px #3f86fe; 
        // background-color: rgba(0,0,0,.2);
        width: 270px;
        height: 270px;
        border-radius: 50%;
        position: fixed;
        z-index: 998;
        left: calc(50% - 135px);
        bottom: 195px;
        flex-direction: column;
        overflow: hidden;
    }
    .diskColItem{
        flex: 1;
        width: 100%;
    }
    .diskRowItem{
        flex: 1;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 20px;
        // position: relative;
    }
    .iconUp{
        background-image: url("../../src/assets/icon-arrows2.png");
        background-position: 50% 10px;
    }
    .iconRight{
        background-image: url("../../src/assets/icon-arrows2.png");
        background-position: 50% 10px;
        transform: rotate(90deg);
    }
    .iconLeft{
        background-image: url("../../src/assets/icon-arrows2.png");
        background-position: 50% 10px;
        transform: rotate(270deg);
    }
    .iconDown{
        background-image: url("../../src/assets/icon-arrows2.png");
        background-position: 50% 10px;
        transform: rotate(180deg);
    }
    .dragDiskBtn{
        position: fixed;
        width: (270px/3);
        height: (270px/3);
        left: calc(50% - (270px/3/2));
        bottom: 285px;
        border-radius: 50%;
        overflow: hidden;
        background: url("../../src/assets/icon-dragBtn2.png") no-repeat center;
        background-size: 60%;
        z-index: 999;
        touch-action: none;
    }


</style>